<template>
  <div class="floor-layout tpl-66">
    <div class="layout-main">
      <div class="coupon_row" :class="data.blockClass">
        <div class="coupon_cell"
        :class="data.blockColor"
        v-for="(block, index) in data.blockList"
        :key="index">
          <layout-item :block="block" @handle-edit="handleEditBlock(index)">
            <template slot-scope="{ block }">
              <div class="back_style"></div>
              <div class="coupon_val">
                <span class="val">{{ block.block_value.value }}</span><span class="val_tag">{{ block.block_value.tag }}</span>
              </div>
              <div class="coupon_term">{{ block.block_value.term }}</div>
            </template>
          </layout-item>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import mixin from '../mixin'
  import request from '@/utils/request'
  import { api } from '~/ui-domain'

  export default {
    name: 'tpl_66',
    mixins: [mixin],
    title: '优惠券',
    dataTpl: {
      tpl_id: 66,
      blockList: [
        {
          block_type: 'COUPON',
          block_value: {
            id: null,
            value: 100.00,
            tag: '元',
            term: '无门槛使用'
          },
          block_opt: ''
        },
        {
          block_type: 'COUPON',
          block_value: {
            id: null,
            value: 8.8,
            tag: '折',
            term: '无门槛使用'
          },
          block_opt: ''
        },
        {
          block_type: 'COUPON',
          block_value: {
            id: null,
            value: 8.8,
            tag: '折',
            term: '无门槛使用'
          },
          block_opt: ''
        }
      ],
      blockType: 0,
      blockClass: 'style_1',
      blockColor: 'color_1',
      blockStyle: {
        hideFinish: false
      }
    },
    mounted() {
      if (this.data.blockList) {
        let _list = this.data.blockList;
        let _ids = [];
        _list.forEach(item => {
          _ids.push(item.block_value.id);
        });
        this.getCouponList(_ids);
      }
    },
    methods: {
      async getCouponList (_ids) {
        let _goodList = [];
        request({
          url: `${api.buyer}/promotions/coupons/queryByIds`,
          method: 'post',
          loading: false,
          data: _ids,
          headers: {
            'Content-Type': 'application/json'
          }
        }).then(res => {
          let _base = this.MixinClone(this.data.blockList);
          res.forEach((item, index) => {
            _base[index].block_value = {
              'id': item.coupon_id,
              'value': item.coupon_price,
              'tag': '元', // 当前只支持满减
              'term': item.title,
              'lastNum': item.create_num - item.received_num
            };
          });
          if (this.data.blockStyle.hideFinish) {
            _base = _base.filter(item => item.block_value.lastNum > 0)
          }
          this.$nextTick(() => {
            this.data.blockList = _base;
            this.$forceUpdate();
          });
        });
      }
    },
    watch: {
      data (newVal, oldValue) {
        let _list = newVal.blockList;
        let _ids = [];
        _list.forEach(item => {
          _ids.push(item.block_value.id);
        });
        this.getCouponList(_ids);
      }
    }
  }
</script>